<template>
  <g :transform="`translate(${x}, ${y})`">
    <!-- 区域标记矩形 -->
    <rect
      :x="0"
      :y="0"
      :width="width"
      :height="height"
      fill="none"
      :stroke="borderColor"
      :stroke-width="borderWidth"
      :stroke-dasharray="isDashed ? `${dashLength}, ${dashGap}` : 'none'"
      :rx="borderRadius"
      :ry="borderRadius"
      class="area-marker"
    />

    <!-- 区域标题 -->
    <text
      :x="titlePosition === 'left' ? -10 : titlePosition === 'right' ? width + 10 : width / 2"
      :y="titlePosition === 'top' ? -10 : titlePosition === 'bottom' ? height + 20 : height / 2"
      :text-anchor="titlePosition === 'left' ? 'end' : titlePosition === 'right' ? 'start' : 'middle'"
      :dominant-baseline="titlePosition === 'top' ? 'auto' : titlePosition === 'bottom' ? 'hanging' : 'middle'"
      class="area-title"
      :fill="titleColor"
      :font-size="titleSize"
    >
      {{ title }}
    </text>
  </g>
</template>

<script setup lang="ts">
interface Props {
  x: number // X坐标
  y: number // Y坐标
  width: number // 宽度
  height: number // 高度
  title: string // 标题文本
  titlePosition?: 'top' | 'right' | 'bottom' | 'left' | 'center' // 标题位置
  titleColor?: string // 标题颜色
  titleSize?: number // 标题字体大小
  borderColor?: string // 边框颜色
  borderWidth?: number // 边框宽度
  borderRadius?: number // 边框圆角
  isDashed?: boolean // 是否使用虚线
  dashLength?: number // 虚线长度
  dashGap?: number // 虚线间隔
}

// 设置默认值
withDefaults(defineProps<Props>(), {
  titlePosition: 'top',
  titleColor: '#333333',
  titleSize: 14,
  borderColor: '#666666',
  borderWidth: 2,
  borderRadius: 4,
  isDashed: true,
  dashLength: 5,
  dashGap: 3
})

defineOptions({
  name: 'AreaMarker'
})
</script>

<style scoped>
.area-marker {
  pointer-events: none;
}

.area-title {
  font-weight: 500;
  pointer-events: none;
}
</style> 